<template>
	<view class="login">
		<view class="content-wrapper">
			<form @submit="formSubmit" @reset="formReset">

				<view class="title">
					<picker mode=selector @change="bindPickerChange" :value="index" :range="array">
						<input type="text" class="login-input">{{array[index]}}</input>
					</picker>

				</view>
				<view class="login-form">
					<view class="login-form-items">
						<view class="login-form-items-title">用户名</view>
						<input type="text" class="login-input" placeholder="请输入用户名" name="username" />
					</view>

					<view class="login-form-items">
						<view class="login-form-items-title">密码</view>
						<input type="password" class="login-input" placeholder="请输入密码" name="password" />
					</view>


				</view>
				<view class="submit-wrapper">
					<button type="primary" form-type="submit">登录</button>
					<button type="default" form-type="reset">取消</button>
				</view>
			</form>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				array: [],
				arrayurl: [],
				index: 0,
			}
		},


		methods: {
			formSubmit: function(e) {
				this.$api.Request({
					url: "/api/User/Login",
					method: 'POST',
					data: {
						userName: e.detail.value.username,
						password: e.detail.value.password,
						localurl: this.arrayurl[this.index],
					},
				}).then((res) => {

					if (res.state == "success") {
						this.$store.commit('login', res); //通过 store.commit 方法触发状态变更

						uni.navigateTo({
							url: '../index/index'
						})
					} else {
						uni.showToast({
							title: res.message,
							duration: 2000,
							icon: 'none',

					 })
					}
				})

			},
			bindPickerChange: function(e) {
				// console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
			},
		},
		onLoad() {
			this.$api.Request({
				url: '/api/User/GetListJsonByLogin',
			}).then((res) => {


				res.forEach(item => {
					this.array.push(item.ProjectName)
					this.arrayurl.push(item.HostUrl)
				});


			});

		}
	}
</script>

<style lang="scss">
	page {
		background: #F4F5F6;
	}

	.login {
		.content-wrapper {
			width: 100%;

			.title {
				margin-top: 35rpx;
				width: 100%;
				//margin-bottom: 10px;
				text-align: center;

				border: 0px;
				width: 50%;
				margin: 0 auto;
				text-align: center;
				border-bottom: 1px solid #E3E3E3;

				font-size: 17px;
				overflow: hidden;
				font-weight: 400;

			}

			.login-form {
				margin: 20px 10px 20px 15px;
				background: #FFFFFF;

				.login-form-items {
					padding: 15px 10px;
					border-bottom: 1px solid #F3F4F5;
					position: relative;
					display: -webkit-flex;
					display: flex;

					.login-form-items-title {
						width: 30%;
						line-height: 22px;
						height: 22px;
						flex-shrink: 0;
					}

					.login-input {
						width: 100%;

					}

					img {
						width: auto;
						height: auto;
						max-width: 100%;
						max-height: 100%;
					}
				}
			}
		}

		.submit-wrapper {
			padding: 5px;
			padding-top: 5px;
			width: 98%;
			justify-content: center;
			line-height: 30px;
			letter-spacing: 10rpx
		}

	}
</style>
